<!--
 * @Author: Lin Ming
 * @Date: 2021-02-25 18:35:33
 * @LastEditors: Lin Ming
 * @LastEditTime: 2021-02-25 23:53:34
 * @FilePath: \vue-zheye\src\views\Home.vue
-->
<template>
  <div class="lm-login">
    <el-row :gutter="12">
      <el-col :span="6" v-for="(item, index) in list" :key="index">
        <el-card class="myCard" :body-style="{ padding: '0px', height: '220px' }" style="margin-bottom: 10px" shadow="hover" >
          <el-avatar :size="80" :src="item.avatar.url"></el-avatar>
          <div style="padding-top: 10px;">
            <h3>{{item.title}}</h3>
            <p style="margin-top: 10px;padding: 0 10px">{{item.description}}</p>
          </div>
          <div class="bottom">
            <el-button type="text" class="button">操作按钮</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import API from '@/api'
interface ColumnsProp {
  avatar: {
    _id: string;
    url: string;
  };
  title: string;
  description: string;
}
const testData: ColumnsProp[] = [
  {
    avatar: {
      _id: '5f3e41a8b7d9c60b68cdd1ec',
      url: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e41a8b7d9c60b68cdd1ec.jpg'
    },
    title: '铺先生',
    description: '酒店售货机，酒店经营，共享经济，新零售，共享数据线，关注灵趣科技，了解更多'
  },
  {
    avatar: {
      _id: '5f3e3a17c305b1070f455202',
      url: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg'
    },
    title: 'Vehicle攻城狮',
    description: '半吊子系统和程序狗，沉迷高端理论，日渐消瘦。'
  },
  {
    avatar: {
      _id: '5f3e41a8b7d9c60b68cdd1ec',
      url: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e41a8b7d9c60b68cdd1ec.jpg'
    },
    title: '铺先生',
    description: '酒店售货机，酒店经营，共享经济，新零售，共享数据线，关注灵趣科技，了解更多'
  },
  {
    avatar: {
      _id: '5f3e3a17c305b1070f455202',
      url: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg'
    },
    title: 'Vehicle攻城狮',
    description: '半吊子系统和程序狗，沉迷高端理论，日渐消瘦。'
  },
  {
    avatar: {
      _id: '5f3e3a17c305b1070f455202',
      url: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg'
    },
    title: 'Vehicle攻城狮',
    description: '半吊子系统和程序狗，沉迷高端理论，日渐消瘦。'
  }
]
export default defineComponent({
  setup () {
    onMounted(() => {
      console.log(312312)
      API.getClomns().then(res => {
        console.log(res)
      })
    })
    return {
      list: testData
    }
  }
})
</script>

<style>
  .lm-login {
    width: 100%;
    height: 100%;
    /* padding-top: 10px; */
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    background-color: #E9EEF3;
  }
  .myCard {
    position: relative;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    justify-content: center;
  }
</style>
